<template>
	<view class="course-content">
		<view class="zhan1" style="background:#ffffff"></view>
		<view class="course-main" style="width:100%;height:100%;overflow:hidden;overflow-y:auto">
			<view class="video-main">
				<!-- <video id="myVideo" src="https://video.cswzsoft.com/06745f426d494c309567adf08473a0f2/bff78b2a29d145b8a45f678e726dbd5d-c61bd6dc62a98d6d2a066c610c5318ec-ld.mp4"
					   controls poster=""></video> -->
				<image :src="content.photo" class="course-img"></image>
				<!-- <view class="courseTypeLabel">{{content.courseTypeLabel}}</view> -->
				<span class="iconfont iconfanhuijiantou" @tap="back"></span>
				<span class="iconfont iconshoucang" @tap="collect" :class="[content.collection?'isShow':'']"></span>
				<!-- <span class="courseType">{{content.courseTypeLabel}}</span> -->

			</view>
			<view class="menu-box">
				<span class="item" v-for="(item,index) in list" :class="item.addClass"
					@tap="select(index)">{{item.name}}</span>
			</view>
			<view class="content-data" v-show="active==0">
				<view class="course-data">
					<view class="left">
						<span class="name">{{content.courseName}}</span>

						<view class="ping">
							<span class="teacher">课时：{{content.classHours}}课时</span>
							<span class="text">评分：</span>
						<uni-rate :value="pingfen" :size="14" active-color="#1783dd" class="main-rate"
							:disabled="true" />						
						</view>
						<span class="iconfont iconshijian">分类：{{content.treeName}}</span>
						<span class="iconfont iconshijian">{{content.createDate}}</span>
					</view>
					<!-- <view class="right">
						<span class="name">学员评分</span>
						<span class="number">9.6+</span>
						<span class="see" @tap="ping">评价</span>
					</view> -->
				</view>
				<view class="course-ind">
					<span class="name">课程介绍</span>
					<p class="content">
						{{content.introduction}}
					</p>
					<!-- <view class="buy" @tap="goPage('../index/order')" v-show="!content.buyFlag && !content.isTree">立即购买</view>
					<view class="buy"  v-show="content.buyFlag">已购买</view>
					<view class="buy" v-show="content.isTree">免费</view> -->
					<!-- <view class="buy"  v-show="content.buyFlag  && content.courseType=='4'">已报名</view>
					<view class="buy" @tap="goPage('../index/order')" v-show="!content.buyFlag   && content.courseType=='4'">立即报名</view> -->
				</view>
			</view>
			<view class="content-data" v-show="active==1">

				<view class="mulu-top" v-show="login && (content.courseType=='1'||content.courseType=='6')">
					<cmd-progress :percent="countObj.jindu" stroke-color="#1783dd" :stroke-width="14"
						class="main-jindu"></cmd-progress>
					<view class="text-main">
						<span class="text">目前已完成{{countObj.a}}课时</span>
						<span class="button" @tap="goStudy">{{text}}</span>
					</view>

				</view>

				<view class="course-list" v-show=" content.courseType=='1'||content.courseType=='6'">
					<span class="text">课程目录</span>
					<uni-steps :options="muluList1" :content="content" active-color="#007AFF" :active="current"
						direction="column" class="time-line" @goPlay="goPlay" />
				</view>

				<view class="course-list" v-show="content.courseType=='3'&& content.buyFlag">
					<span class="text">观看直播</span>
					<view class="go" :class="{'nosee' : content.zbStatus!='1' }" @tap="content.zbStatus=='1' && see()"
						v-show="(content.buyFlag || content.isTree) && (content.courseType=='3')">立即观看</view>
				</view>

				<view class="course-list" v-show=" content.courseType=='5'">
					<view class="item" v-for="(item,index) in content.educationCourseGroupDetailsList">
						<image :src="imgUrl+item.photo" class="img">
						</image>
						<view class="right">
							<span class="title">{{item.courseName}}</span>
							<span class="number">总学时:{{item.educationCourse.classHours}}</span>
							<span class="iconfont " style="color:#1783dd">

								<!-- <span  v-if="item.courseType=='1'" >点播课程</span>
							<span  v-if="item.courseType=='10'">第三方课程</span> -->
							</span>
							<span class="iconfont iconren2">
								{{item.studyCount}}

							</span>
							<!-- <div v-show="item.studyFlag" class="start" @click="goPage(item.courseId)">马上学习</div>
							<div v-show="!item.studyFlag" class="start1">马上学习</div> -->

							<view class="go" v-show="item.studyFlag"
								@tap="goPage('../course/content?id='+item.courseId)">查看课程</view>
							<view class="go1" v-show="!item.studyFlag">查看课程</view>
						</view>
					</view>
				</view>

				<nodata v-show="start1 && muluList1.length==0 && content.courseType=='1' " style="background:#fff">
				</nodata>
				
				<!-- 面授课程报名 -->
				<view class="login-box" v-show="content.courseType=='4' && !content.buyFlag">

					<view class="login-item">
						<span class="input-text">姓名</span>
						<input class="login-input" v-model="data.name" type="text" placeholder-style="color:#888888;"
							placeholder="姓名">
					</view>
					<view class="login-item">
						<span class="input-text">性别</span>
						<radio-group @change="radioChange">
							<view class="main-data">
								<span class="item" v-for="(item1, index1) in options" :key="index1"
									style="margin-left:10rpx;">
									<radio :value="item1.id" :checked="item1.id==data.sex" color="#1783dd"
										style="transform: scale(0.9)" />
									<span class="text" style="font-size:30rpx">{{item1.content}}</span>
								</span>
							</view>
						</radio-group>
					</view>
					<!-- <view class="login-item" >
						<span class="input-text">身份证</span>
						<input  class="login-input" v-model="data.no" type="text"  placeholder-style="color:#888888;" placeholder="身份证" >
					</view> -->
					<view class="login-item">
						<span class="input-text">手机号码</span>
						<input class="login-input" v-model="data.mobile" type="text" placeholder-style="color:#888888;"
							placeholder="手机号码">
					</view>
					<view class="baoming" v-show="content.buyFlag ">已报名</view>
					<view class="baoming" v-show="!content.buyFlag" @tap="sign">立即报名</view>
				</view>
				
				<view class="login-box" v-show="content.courseType=='4' && content.buyFlag">
				
					<view class="login-item">
						<span class="input-text">姓名</span>
						<span class="login-input" >{{face.msName}}</span>
					</view>
					<view class="login-item">
						<span class="input-text">性别</span>
						<span class="login-input">{{face.msSexLabel}}</span>
					</view>

					<view class="login-item">
						<span class="input-text">手机号码</span>
						<span class="login-input">{{face.msMobile}}</span>
					</view>
					<view class="baoming" v-show="content.buyFlag ">已报名</view>
					<view class="baoming" v-show="!content.buyFlag" @tap="sign">立即报名</view>
				</view>
							
				<view class="login-box"
					v-show="(content.courseType=='3') && !content.buyFlag">

					<view class="login-item">
						<span class="input-text">姓名</span>
						<input class="login-input" v-model="data.name" type="text" placeholder-style="color:#888888;"
							placeholder="姓名">
					</view>
					<view class="login-item">
						<span class="input-text">性别</span>
						<radio-group @change="radioChange">
							<view class="main-data">
								<span class="item" v-for="(item1, index1) in options" :key="index1"
									style="margin-left:10rpx;">
									<radio :value="item1.id" :checked="item1.id==data.sex" color="#1783dd"
										style="transform: scale(0.9)" />
									<span class="text" style="font-size:30rpx">{{item1.content}}</span>
								</span>
							</view>
						</radio-group>
					</view>
					<!-- <view class="login-item" >
						<span class="input-text">身份证</span>
						<input  class="login-input" v-model="data.no" type="text"  placeholder-style="color:#888888;" placeholder="身份证" >
					</view> -->
					<view class="login-item">
						<span class="input-text">手机号码</span>
						<input class="login-input" v-model="data.mobile" type="text" placeholder-style="color:#888888;"
							placeholder="手机号码">
					</view>
					<view class="baoming" v-show="content.buyFlag ">已报名</view>
					<view class="baoming" v-show="!content.buyFlag " @tap="sign">立即报名</view>
				</view>

			</view>
			<view class="content-data" v-show="active==2" style="padding-bottom:30rpx;background:#fff;">
				<view class="ping-item" v-for="(item,index) in allPing">
					<image :src="item.userPhoto" alt="" class="head">
						<view class="data-box">
							<span class="text">{{item.userName}}</span>
							<span class="time">{{item.createDate}}</span>
							<uni-rate :value="item.score" :size="14" active-color="#1783dd" class="main-rate"
								:disabled="true" />
							<p class="content">{{item.content}}</p>
						</view>
				</view>
				<nodata v-show="start2 &&allPing.length==0 "></nodata>
				<view class="me-student iconfont iconxiaoxi" @tap="goPage('comment?id='+id)">我的评价</view>
			</view>
			<view class="backhome iconfont iconshouye-yes" @tap="$gohome"></view>
			<uni-popup ref="popup" type="center" :change='handelChange' class="check-popup check-popup1">
				<view class="publishWrapper">
					<view class="title">人脸验证</view>
					<view class="check-content">

						<view class="up-box up-box1">
							<view class="upload-img  upload-img1" :class="addClass1">
								<img :src="imgUrl2" class="img" v-show="imgUrl2" />
								<view class="dialog-box" @tap="choose('2')" v-show="!imgUrl2">
									<view class="iconfont-box">
										<span class="iconfont iconjia"></span>
										<span class="text">点击拍摄照片</span>
									</view>

									<view class="iconfont-box" v-show="imgUrl2">
										<span class="iconfont iconbianji"></span>
									</view>
								</view>

								<view class="dialog-box" @tap="choose('2')" v-show="imgUrl2"
									style="background:rgba(0,0,0,0.3)">
									<view class="iconfont-box">
										<span class="iconfont iconbianji" style="color:#ffffff;"></span>
									</view>


								</view>
							</view>
						</view>
						<view class="button button1" v-show="!load2 && imgUrl2" @tap="uploadImg">上传</view>
						<view class="button button1" v-show="load2 && imgUrl2">照片验证中...</view>
					</view>
				</view>

			</uni-popup>
			<w-compress ref='wCompress' />
		</view>

	</view>
</template>

<script>
	import uniSteps from '@/components/uni-steps/uni-steps.vue'
	import Cookies from 'js-cookie'
	import nodata from '@/components/nodata.vue'
	import cmdProgress from "@/components/cmd-progress/cmd-progress.vue"
	import uniPopup from "@/components/uni-popup/uni-popup"
	import WCompress from '@/components/w-compress/w-compress.vue'
	export default {
		components: {
			uniSteps,
			cmdProgress,
			nodata,
			uniPopup,
			WCompress
		},
		data() {
			return {
				pingfen:'',
				face:{
					msName:'',
					msSexLabel:'',
					msMobile:''
				},
				active: 0,
				number: 5,
				current: -1,
				start1: false,
				imgUrl2: '',
				load2: false,
				addClass1: "",
				options: [{
						id: '1',
						content: '男',
						checked: false
					},
					{
						id: '2',
						content: '女',
						checked: false
					},
				],
				start2: false,
				data: {
					name: '',
					no: '',
					mobile: '',
					sex: ''
				},
				list2: [{
					title: '课时1',
					desc: 'PS是怎样练成的',
					time: '00:32:16',
					icon: 'iconbofangT',
				}, {
					title: '课时2',
					desc: 'PS是怎样练成的',
					time: '00:32:16',
					icon: 'iconbofangT',
				}, {
					title: '课时3',
					desc: 'PS是怎样练成的',
					time: '00:32:16',
					icon: 'iconbofangT',
				}, {
					title: '课时4',
					desc: 'PS是怎样练成的',
					time: '00:32:16',
					icon: 'iconbofangT',
				}],
				text: '',
				list: [{
						name: '课程介绍',
						addClass: 'active'
					},
					{
						name: '课程目录',
						addClass: ''
					},
					{
						name: '课程评价',
						addClass: ''
					},
				],
				id: '',
				allPing: [],
				pageNo1: 1,
				pageSize1: 20,
				content: {},
				muluList1: [],
				muluList2: [],
				type: '',
				countObj: {},
				login: false,
				typeFlag: '1',
				pageUrl: '',
				file: '',
				imgUrl: '',
			}
		},
		onLoad(obj) {
			this.id = obj.id;
			this.imgUrl = this.$url;
			console.log(this.id, 999999999)
			if (uni.getStorageSync("token")) {
				this.login = true;
			}
			this.getData();
			
		},
		onShow() {
			// this.getData();
			setTimeout(() => {
				//this.$refs.popup.open();
			}, 3000)

		},
		onBackPress(event) {
			console.log(event, 88)
		},
		methods: {
			choose(type) {
				let that = this;

				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['camera', 'album'], //从相机拍摄
					success: function(res) {
						// uni.showLoading({
						// 	title:'照片上传中...'
						// })
						// 


						uni.showLoading({
							title: '图片压缩中...',
							mask: true
						})
						that.$refs.wCompress.start(res.tempFilePaths[0], {
								pixels: 2000000, // 最大分辨率，默认二百万
								quality: 0.7, // 压缩质量，默认0.8
								type: 'png', // 图片类型，默认jpg
								base64: true, // 是否返回base64，默认false，非H5有效
							})
							.then(res1 => {


								//base64转file文件
								function dataURLtoFile(dataurl, filename) {
									var arr = dataurl.split(','),
										mime = arr[0].match(/:(.*?);/)[1],
										bstr = atob(arr[1]),
										n = bstr.length,
										u8arr = new Uint8Array(n);
									while (n--) {
										u8arr[n] = bstr.charCodeAt(n);
									}
									return new File([u8arr], filename, {
										type: mime
									});
								}
								let name = new Date().getTime() + ".png"
								that.file = dataURLtoFile(res1, name);
								that.imgUrl2 = res.tempFilePaths[0];
								that.addClass1 = "isbg";
								uni.hideLoading()
							})
							.catch(e => {
								console.log(e)
								uni.hideLoading()
							})



						// that.photo2 = data.data.location;
					}
				});
			},
			handelChange(e) {

			},
			uploadImg() {
				let that = this;
				that.load2 = true;
				var formdata = new FormData();
				formdata.append('multipartFile1', this.file);
				formdata.append('courseId', this.id);
				// uni.showToast({
				//            		title:that.imgUrl2,
				//            		icon:'none'
				//            	})
				console.log(8080)
				uni.uploadFile({
					url: that.$url + '/cloud/compareFace', //仅为示例，非真实的接口地址
					header: {
						token: uni.getStorageSync("token")
					},
					file: this.file,
					formData: {
						courseId: this.id
					},
					success: (uploadFileRes) => {
						console.log(uploadFileRes, 90)
						let data = JSON.parse(uploadFileRes.data);
						that.load2 = false;
						if (data.code == "0") {
							that.$refs.popup.close();
							that.content.educationUserCourse.faceFlag = "1"
							uni.showToast({
								title: '已验证',
								icon: 'none'
							})
							setTimeout(() => {
								if (that.typeFlag == "1") {
									that.goStudy();
								} else {
									that.goPage(that.pageUrl);
								}
							}, 600)

						} else {
							uni.showToast({
								title: data.msg,
								icon: 'none'
							})
						}
						// setTimeout(()=>{
						// 	let data = JSON.parse(uploadFileRes.data)
						// 	if(type=="1"){
						// 		that.imgUrl1 = data.data.url;
						//     	that.photo1 = data.data.location;
						// 	}
						// 	else{
						// 		that.imgUrl2 = data.data.url;
						//     	that.photo2 = data.data.location;
						// 	}
						// 	uni.hideLoading();
						// },500)


					}

				});
			},
			goPPT(obj){
				
			},
			goPlay(obj) {
				let that = this;
				if (!uni.getStorageSync("token")) {
					// uni.reLaunch({
					//            url:'../login/login'
					//          })
					uni.navigateTo({
						url: "../login/login"
					})
					return;
				}
				if (obj.type == "2") {

					let obj1 = {
						rootCourseId: this.id,
						detailsId: obj.did,
						courseType: this.content.courseType
					}
					uni.setStorageSync('paperData', JSON.stringify(obj1))
				}
				if (this.content.faceopenFlag == "0") {
					this.goPage(obj.url);
					return;
				}

				that.pageUrl = obj.url;
				that.typeFlag = "2";

				if (this.content.educationUserCourse.faceFlag == "0") {
					uni.showLoading({
						title: '本课程开启了人脸识别,正在检测个人头像是否为本人照片...',
						mask: true,
					})

					this.$http.post("/cloud/detectFace")
						.then(function(response) {

							setTimeout(() => {
								uni.hideLoading();
								that.$refs.popup.open();
							}, 500)

							//console.log(that.chechCom(),123)


						})
						.catch(function(error) {
							if (error.data.code == "20009" || error.data.code == "20005" || error.data.code ==
								"20010") {
								uni.showModal({
									title: '提示',
									content: '您个人资料的头像不是您本人的照片，请到个人资料中心修改?',
									success: function(res) {
										if (res.confirm) {
											that.goPage('../me/editData')

										} else if (res.cancel) {
											console.log('用户点击取消');
										}
									}
								});

							}
							// handle error
							console.log(error);
						})

				} else {
					console.log(obj.url, 99)
					this.goPage(obj.url)
				}

			},
			goStudy() {
				console.log(this.muluList1, 9999944)
				if (!uni.getStorageSync("token")) {
					// uni.reLaunch({
					//            url:'../login/login'
					//          })
					uni.navigateTo({
						url: "../login/login"
					})
					return;
				}
				this.typeFlag = "1";
				let that = this;
				// if(!this.content.buyFlag && !this.content.isTree){
				//   this.buyCourse();
				//   return;
				// }
				if (this.countObj.jindu == 100) {
					return;
				}
				if (this.countObj.studyCount == 0) {
					if (this.content.faceopenFlag == "0") {

						if (this.muluList1[0].detailType == "1") {
							console.log(this.muluList1, 888)
							this.goPage('../course/play?id1=' + this.content.privateId + '&id2=' + this.muluList1[0].id);
						} else {
							let obj = {
								rootCourseId: this.id,
								detailsId: this.muluList1[0].did,
								courseType: this.content.courseType
							}
							uni.setStorageSync('paperData', JSON.stringify(obj))
							console.log(this.muluList1[0], 666666666)
							// this.goPage('test?id='+this.muluList1[0].testObj.id+"&courseId="+this.id)
							this.goPage('test?id=' + this.muluList1[0].testObj.id + "&courseId=" + this.id)
						}

						return;
					}
					if (this.content.educationUserCourse.faceFlag == "0") {
						uni.showLoading({
							title: '本课程开启了人脸识别,正在检测个人头像是否为本人照片...',
							mask: true,
						})

						this.$http.post("/cloud/detectFace")
							.then(function(response) {
								setTimeout(() => {
									uni.hideLoading();
									that.$refs.popup.open();
								}, 500)
								//console.log(that.chechCom(),123)


							})
							.catch(function(error) {
								if (error.data.code == "20009" || error.data.code == "20005" || error.data.code ==
									"20010") {

									uni.showModal({
										title: '提示',
										content: '您个人资料的头像不是您本人的照片，请到个人资料中心修改?',
										success: function(res) {
											if (res.confirm) {
												that.goPage('../me/editData')

											} else if (res.cancel) {
												console.log('用户点击取消');
											}
										}
									});

								}
								// handle error
								console.log(error);
							})

					} else {

						if (this.muluList1[0].detailType == "1") {
							console.log(this.muluList1, 900)
							this.goPage('../course/play?id1=' + this.content.privateId + '&id2=' + this.muluList1[0].id);
						} else {
							let obj = {
								rootCourseId: this.id,
								detailsId: this.muluList1[0].did,
								courseType: this.content.courseType
							}
							uni.setStorageSync('paperData', JSON.stringify(obj))
							this.goPage('test?id=' + this.muluList1[0].testObj.id + "&courseId=" + this.id)
						}
					}



					// var routeData = this.$router.resolve({ path: "/video_play/"+this.$route.params.id+"/0"});
					// window.open(routeData.href, '_blank');
				} else {
					console.log(334)
					if (this.content.faceopenFlag == "0") {

						let a = this.countObj.studyCount;

						if (this.muluList1[a].detailType == "1") {

							this.goPage('../course/play?id1=' + this.content.privateId + '&id2=' + this.muluList1[a].id);
						} else {
							let obj = {
								rootCourseId: this.id,
								detailsId: this.muluList1[a].did,
								courseType: this.content.courseType
							}
							uni.setStorageSync('paperData', JSON.stringify(obj))

							this.goPage('test?id=' + this.muluList1[a].testObj.id + "&courseId=" + this.id)
						}

						return;
					}
					if (this.content.educationUserCourse.faceFlag == "0") {
						uni.showLoading({
							title: '本课程开启了人脸识别,正在检测个人头像是否为本人照片...',
							mask: true,
						})

						this.$http.post("/cloud/detectFace")
							.then(function(response) {
								setTimeout(() => {
									uni.hideLoading();
									that.$refs.popup.open();
								}, 500)
								//console.log(that.chechCom(),123)


							})
							.catch(function(error) {
								if (error.data.code == "20009" || error.data.code == "20005" || error.data.code ==
									"20010") {

									uni.showModal({
										title: '提示',
										content: '您个人资料的头像不是您本人的照片，请到个人资料中心修改?',
										success: function(res) {
											if (res.confirm) {
												that.goPage('../me/editData')

											} else if (res.cancel) {
												console.log('用户点击取消');
											}
										}
									});

								}
								// handle error
								console.log(error);
							})
					} else {
						let a = this.countObj.studyCount;

						if (this.muluList1[a].detailType == "1") {

							this.goPage('../course/play?id1=' + this.content.privateId + '&id2=' + this.muluList1[a].id);
						} else {
							let obj = {
								rootCourseId: this.id,
								detailsId: this.muluList1[a].did,
								courseType: this.content.courseType
							}
							uni.setStorageSync('paperData', JSON.stringify(obj))
							this.goPage('test?id=' + this.muluList1[a].testObj.id + "&courseId=" + this.id)
						}
					}



				}
			},
			collect() {
				if (!uni.getStorageSync("token")) {
					// uni.reLaunch({
					//           url: '../login/login'
					//       });
					uni.navigateTo({
						url: "../login/login"
					})
					return;
				}
				var that = this;
				this.$http.post("/f/collectionCourse?rootCourseId=" + this.id)
					.then(function(response) {
						if (!that.content.collection) {
							that.content.collection = true;
							uni.showToast({
								title: '收藏成功',
								icon: 'none'
							})
						} else {
							that.content.collection = false;
							uni.showToast({
								title: '取消成功',
								icon: 'none'
							})
						}
					})
					.catch(function(error) {
						// handle error
						console.log(error);
					})
			},
			sign() {
				if (!uni.getStorageSync('token')) {
					uni.showToast({
						title: '请先登录',
						icon: 'none'
					})
					return;
				}
				if (this.data.name == "" || this.data.mobile == "" || this.data.sex == "") {
					uni.showToast({
						title: '请输入完整的信息',
						icon: 'none'
					})
					return;
				} else {
					if (this.data.mobile != "") {
						if (!(/^1[3456789]\d{9}$/.test(this.data.mobile))) {
							uni.showToast({
								title: '请输入正确的手机号',
								icon: 'none'
							})
							return;
						}
					}
					// if(this.data.no!=""){
					//   if (!(/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(this.data.no))) {
					//     uni.showToast({
					//  	title:'身份证不合法',
					//  	icon:'none'
					//  })
					//     return;
					//   }
					// }
					if (Number(this.content.presentPrice) == 0) {
						var that = this;
						this.$http.post("/f/addFreeOrder?buyId=" + this.id + "&buyType=" + this.content.courseType +
								"&msCard=" + this.data.no + "&msMobile=" + this.data.mobile + "&msName=" + this.data.name +
								"&msSex=" + this.data.sex)
							.then(function(response) {
								uni.showToast({
									title: '已成功报名',
									icon: 'success'
								})								
								that.getData();
								// that.data = {
								// 	name: '',
								// 	no: '',
								// 	mobile: '',
								// 	sex: ''
								// }
							})
							.catch(function(error) {
								// handle error
								console.log(error);
							})
					} else {
						uni.setStorageSync("m-name", this.data.name);
						uni.setStorageSync("m-sex", this.data.sex);
						uni.setStorageSync("m-mobile", this.data.mobile);
						uni.setStorageSync("m-no", this.data.no);
						this.$router.push("/order/" + this.$route.params.id)
					}

				}
			},
			radioChange(e) {
				this.data.sex = e.detail.value;
				console.log(e)
			},
			goPage(url) {
				uni.navigateTo({
					url: url
				});
			},
			see() {
				// var routeData = this.$router.resolve({ path: "/live/"+this.content.channelNo});
				// window.open(routeData.href, '_blank');
				// return;
				let zhiboUrl = "/pages/course/live?id=" + this.content.channelNo;
				uni.navigateTo({
					url: zhiboUrl
				})
			},
			formatSeconds(value) {
				let result = parseInt(value)
				let h = Math.floor(result / 3600) < 10 ? '0' + Math.floor(result / 3600) : Math.floor(result / 3600)
				let m = Math.floor((result / 60 % 60)) < 10 ? '0' + Math.floor((result / 60 % 60)) : Math.floor((result /
					60 % 60))
				let s = Math.floor((result % 60)) < 10 ? '0' + Math.floor((result % 60)) : Math.floor((result % 60))
				result = `${h}:${m}:${s}`
				return result
			},
			getList() {
				var that = this;
				this.$http.get("/f/pagePingFen?rootCourseId=" + this.id + "&pageNo=" + this.pageNo1 + "&pageSize=20")
					.then(function(response) {
						var data = response.data;
						var len = data.length;
						if (len != 0) {
							// for(var i=0;i<len;i++){
							//   data[i].photo = "http://seed.ckwashington.com/admin" + data[i].photo;
							// }
							data[len - 1].addClass = "no-border";

						}
						that.allPing = data;
						that.start2 = true;

					})
					.catch(function(error) {
						// handle error
						console.log(error);
					})
			},
			getData() {
				let that = this;
				this.$http.get("/f/course?id=" + this.id)
					.then(function(response) {
						var completeListSize = response.data.course.completeListSize;				
						that.pingfen = response.data.course.score;
						let data = Object.assign({}, response.data.course, response.data.course.courseInfo, response.data,
							response.data.course.educationCourseClassify);
						that.type = data.courseType;
						if (data.courseType == "1" || data.courseType == "6") {
							that.list[1].name = "课程目录";
						} else if (data.courseType == "4") {
							that.list[1].name = "课程报名";
							if(response.data.order[0]){
								that.face.msName = response.data.order[0].msName;
								that.face.msMobile = response.data.order[0].msMobile;
								that.face.msSexLabel = response.data.order[0].msSexLabel;
							}							
						}
						that.getList();
						let detail = [];
						if (data.courseType != '10') {
							detail = data.educationCourseDbDetailsList;
							if(data.courseType == '6'){
								detail = data.educationCoursePptDetailsList;
							}
						} else {
							detail = data.educationCourseThirdDetailsList;
						}
						if (uni.getStorageSync("token")) {
							if (response.data) {
								let countObj = response.data.userStudyHoursMap;
								countObj.studyCount = data.studyCount;
								countObj.jindu = Math.ceil(((countObj.studyCount)*100) / (countObj.detailsCount) )
								// console.log(countObj.studyCount,999999999999)
								// console.log(countObj.detailsCount,999999999999)
								// console.log(countObj.jindu,999999999999)
								countObj.a = completeListSize;
								console.log(data, 189)
								that.countObj = countObj;
							}

						}
						if (Number(data.presentPrice) == 0) {
							data.isTree = true;
						}
						let b = [];
						// if(detail.educationPaperList.length!=0){
						//   detail.educationPaperList.forEach(())
						// }
						if (detail) {
							if (detail.length != 0) {
								let arr2 = [];
								let arr5 = [];
								let arr6 = [];
								detail.forEach((item, i) => {
									if (data.courseType != '10') {
										if (item.educationPaperList.length != 0) {
											b.push(item.educationPaperList[0])
										}
										item = Object.assign(item, item.educationVideo)
										item.study = 0;
										if(!item.videoTime) item.videoTime = 0
										item.timeTesx = that.formatSeconds(item.videoTime);
										item.time = item.timeTesx;
										if (item.detailType == '1') {

										}
										item.desc = item.detailName;

										item.title = '课时' + (i + 1);
										item.icon = "iconbofangT";
										if (that.login) {
											let a = item.userStudyTime;
											if (a >= item.videoTime) {
												a = item.videoTime
											}
											item.study = Math.ceil((a / item.videoTime) * 100);
											if (item.educationPaperList.length != 0) {
												console.log(666, item.educationPaperList[0])
												item.testObj = item.educationPaperList[0];
												item.testTitle = item.testObj.title;
												if (item.detailType == '2') {
													item.desc = item.testObj.title;
												}
											}
										}
										if (item.detailType == "1") {
											arr5.push(item);
										}
									} else {
										item = Object.assign(item, item.educationThirdChexuetang)
										item.desc = item.name;
										item.detailType = '1'
										//item.studyFlag = true
										that.text = "开始学习"
										let a = 0;
										let b = 0;
										item.educationThirdChexuetangDetailsList.forEach((item1, i1) => {
											if (item1.fileId) {
												b++;
												if (item1.completeFlag) {
													a++;
												}
											}
										})
										console.log(a, b)
										item.study = Math.ceil((a / b) * 100);
										if (item.detailType == "1") {
											arr5.push(item);
										}
									}

									arr2.push(item);
								});

								//that.videoList = arr5;
								that.countObj.detailsCount = arr2.length;
								that.countObj.jindu = Math.ceil((that.countObj.studyCount / that.countObj
									.detailsCount) * 100);
								arr5.forEach((item, i) => {
									item.index = i
								})
								that.muluList1 = arr2;
								console.log(arr5, that.content, 666)
								that.muluList2 = arr5;
								let len = arr2.length;
								if (data.courseType == '10') {
									data.courseType = "1"
								}

								if (that.countObj.studyCount == 0) {
									that.text = "开始学习"
								} else {
									that.text = "继续学习"
								}
								if (that.countObj.jindu == 100) {
									that.text = "已学完"
								}
								// if(that.muluList1[len-1].studyFlag){
								//   that.isTest = true;
								// }
								// else{
								//   that.isTest = false;
								// }

								if (that.countObj.studyCount < arr5.length) {
									that.nextTitle = arr5[that.countObj.studyCount].detailName;
								}


							} else {

								that.text = "暂无课时"
							}

							//that.testList = b;
						}
						// if(data.pingfenFlag=="0"){
						// 	that.list.splice(2,1);
						// 	let obj = {};
						// 	obj.addClass = "noData";
						// 	that.list.push(obj)
						// }
						data.photo = that.$url + data.photo;
						console.log(data, 9090)
						that.content = data;
						that.start1 = true;
					})
					.catch(function(error) {
						console.log(error);
					})

			},
			back() {
				uni.navigateBack({
					delta: 4
				});
			},
			search() {

			},
			change(item) {
				this.current = item.detail.current;
			},
			goSelect() {
				console.log(222)
			},
			select(index) {
				if (this.list[index].name) {
					this.active = index;
					this.list.forEach((item, i) => {
						if (i == index) {
							item.addClass = "active"
						} else {
							item.addClass = ""
						}
					})
				}

			}
		}
	}
</script>

<style lang="less">
	.course-content {
		width: 100%;
		height: 100%;
		background: #f5f5f5;
		overflow-y: auto;

		.content-data {
			width: 100%;

			.mulu-top {
				width: 100%;
				padding: 20rpx 30rpx;
				background: #fff;
				box-sizing: border-box;
				margin-bottom: 20rpx;
			}

			.text-main {
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 30rpx;
				margin-bottom: 10rpx;

				.text {
					font-size: 28rpx;
					color: #555555;
				}

				.button {
					width: 120rpx;
					height: 50rpx;
					text-align: center;
					line-height: 50rpx;
					border-radius: 6rpx;
					display: block;
					color: #fff;
					font-size: 26rpx;
					background: #1783dd;
				}
			}

			.me-student {
				position: fixed;
				width: 450rpx;
				text-align: center;
				height: 60rpx;
				line-height: 60rpx;
				color: #ffffff;
				background: #1783dd;
				border-radius: 8rpx;
				left: 150rpx;
				bottom: 20rpx;
				font-size: 30rpx;
			}

			.me-student:before {
				margin-right: 10rpx;
			}

			.ping-item {
				width: 100%;
				box-sizing: border-box;
				padding: 0 40rpx;
				padding-top: 30rpx;
				background: #ffffff;
				display: flex;

				.head {
					width: 120rpx;
					height: 120rpx;
					display: block;
					margin-right: 20rpx;
					border-radius: 50%;
				}

				.data-box {
					width: calc(100% - 140rpx);
					position: relative;

					.time {
						position: absolute;
						line-height: 40rpx;
						font-size: 26rpx;
						color: #777777;
						top: 0;
						right: 20rpx;
					}

					.main-rate {
						width: 100%;
						margin: 25rpx 0;
						margin-bottom: 10rpx;
						position: relative;
						top: -4rpx;

						.uni-rate__icon {
							display: flex;
							align-items: center;
						}
					}

					.content {
						width: 100%;
						line-height: 40rpx;
						font-size: 28rpx;
						color: #777777;
						margin-top: 16rpx;
					}

					.text {
						width: calc(100% - 240rpx);
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						display: block;
						line-height: 40rpx;
						font-size: 32rpx;
						color: #444444;
					}
				}
			}

			.ping-item:last-child {
				margin-bottom: 30rpx;
			}

			.login-box {
				width: 100%;
				box-sizing: border-box;
				margin: 0 auto;
				padding: 0 40rpx;
				margin-top: 40rpx;
				border: 1px solid #f0f0f0;
				border-radius: 10rpx;
				overflow: hidden;

				.baoming {
					width: 400rpx;
					height: 70rpx;
					margin: 30rpx auto;
					border-radius: 10rpx;
					background: #1783dd;
					color: #fff;
					text-align: center;
					line-height: 70rpx;
					font-size: 32rpx;
				}

				.login-item {
					width: 100%;
					height: 100rpx;
					border-bottom: 1px solid #f0f0f0;
					display: flex;
					align-items: center;
					background: #ffffff;

					.login-input {
						width: calc(100% - 150rpx);
						height: 100rpx;
						font-size: 28rpx;
						color: #666666;
						box-sizing: border-box;
						padding-left: 40rpx;
						line-height: 100rpx;
					}

					.login-input1 {
						width: calc(100% - 210rpx);
					}

					.iconyouEdit {
						width: 60rpx;
						height: 100rpx;
						line-height: 100rpx;
						text-align: left;
						font-size: 32rpx;
						color: #888888 !important;
					}

					.input-text {
						width: 180rpx;
						height: 100rpx;
						display: block;
						box-sizing: border-box;
						padding-left: 30rpx;
						line-height: 100rpx;
						text-align: center;
						font-size: 28upx;
						color: #666666;
					}
				}

				.login-item:last-child {
					border: 0;
				}
			}

			.course-list {
				width: 100%;
				background: #ffffff;
				box-sizing: border-box;
				padding: 20rpx 30rpx;

				.nosee {
					background: #c3c0ca !important;
				}

				.go {
					width: 160rpx;
					height: 60rpx;
					line-height: 60rpx;
					text-align: center;
					border-radius: 6rpx;
					font-size: 28rpx;
					color: #fff;
					background: #1783dd;
					margin-left: calc(50% - 80rpx);
				}

				.item {
					width: 100%;
					display: flex;
					margin-top: 30rpx;
					position: relative;

					.courseTypeLabel {
						width: 260rpx;
						position: absolute;
						top: 0;
						height: 60rpx;
						line-height: 60rpx;
						font-size: 24rpx;
						text-align: center;
						background: #3a7bf3;
						color: #FFFFFF;
					}

					.img {
						width: 260rpx;
						height: 180rpx;
						margin-right: 30rpx;
						border-radius: 10rpx;
					}

					.right {
						width: calc(100% - 290rpx);
						position: relative;

						.go {
							position: absolute;
							width: 160rpx;
							height: 60rpx;
							line-height: 60rpx;
							text-align: center;
							border-radius: 6rpx;
							font-size: 28rpx;
							color: #fff;
							background: #1783dd;
							right: 0rpx;
							bottom: 20rpx;
						}

						.go1 {
							position: absolute;
							width: 160rpx;
							height: 60rpx;
							line-height: 60rpx;
							text-align: center;
							border-radius: 6rpx;
							font-size: 28rpx;
							color: #fff;
							background: #cccccc;
							right: 0rpx;
							bottom: 20rpx;
						}

						.title {
							width: 100%;
							display: block;
							line-height: 40rpx;
							height: 40rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							font-size: 32rpx;
							color: #444444;
							margin-top: 10rpx;
						}

						.number {
							width: 100%;
							display: block;
							line-height: 30rpx;
							height: 30rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							font-size: 28rpx;
							color: #666666;
							margin-top: 5rpx;
						}

						.iconfont {
							width: 100%;
							display: block;
							line-height: 30rpx;
							height: 30rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							font-size: 28rpx;
							color: #666666;
							margin-top: 16rpx;
						}

						.iconfont:before {
							font-size: 34rpx;
							margin-right: 6rpx;
						}
					}
				}

				.text {
					display: block;
					width: 100%;
					line-height: 50rpx;
					font-size: 34rpx;
					color: #444444;
					font-weight: 500;
				}

			}

			.course-ind {
				width: 100%;
				margin-top: 20rpx;
				box-sizing: border-box;
				padding: 20rpx 30rpx;
				background: #ffffff;

				.buy {
					position: fixed;
					width: 690rpx;
					bottom: 20rpx;
					height: 70rpx;
					line-height: 70rpx;
					text-align: center;
					left: 30rpx;
					border-radius: 6rpx;
					background: #1783dd;
					font-size: 32rpx;
					color: #ffffff;
				}

				.name {
					display: block;
					width: 100%;
					line-height: 50rpx;
					font-size: 34rpx;
					color: #444444;
					font-weight: 500;
				}

				.content {
					width: 100%;
					margin-top: 10rpx;
					font-size: 28rpx;
					color: #666666;
					line-height: 40rpx;
				}
			}

			.course-data {
				width: 100%;
				box-sizing: border-box;
				padding: 20rpx 30rpx;
				padding-bottom: 20rpx;
				background: #fff;
				display: flex;
				justify-content: space-between;

				.left {
					width: 100%;
					position: relative;

					.ping {
						width: 100%;
						height: 50rpx;
						display: flex;
						align-items: center;
						margin-top: 0rpx;

						.text {
							font-size: 28rpx;
							color: #999999;
							margin-right: 0rpx;
						}
						.uni-rate__icon {
							display: flex;
							align-items: center;
						}
					}

					.go {
						width: 160rpx;
						height: 60rpx;
						line-height: 62rpx;
						position: absolute;
						border-radius: 30rpx;
						text-align: center;
						right: 0rpx;
						bottom: 10rpx;
						background: #f22525;
						color: #ffffff;
						font-size: 28rpx;
						box-shadow: 0 2rpx 6rpx #f22525;
					}

					.name {
						line-height: 50rpx;
						font-size: 32rpx;
						color: #444444;
						display: block;
						width: 100%;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}

					.teacher {
						line-height: 30rpx;
						display: block;
						font-size: 28rpx;
						margin-right: 30rpx;
						color: #999999;
					}

					.iconfont {
						line-height: 40rpx;
						font-size: 28rpx;
						color: #999999;
						display: block;
						margin-top: 0rpx;
					}

					.iconfont:before {
						margin-right: 10rpx;
						font-size: 42rpx;
						color: #1783dd;
					}
				}

				.right {
					width: calc(100% - 520rpx);

					.name {
						line-height: 70rpx;
						font-size: 30rpx;
						color: #999999;
						display: block;
						text-align: center;
						width: 100%;
					}

					.number {
						line-height: 42rpx;
						font-size: 38rpx;
						color: #f22525;
						display: block;
						text-align: center;
						width: 100%;
						position: relative;
						top: -8rpx;
					}

					.see {
						width: 110rpx;
						height: 45rpx;
						line-height: 45rpx;
						margin: 0 auto;
						text-align: center;
						background: #f22525;
						font-size: 26rpx;
						display: block;
						color: #ffffff;
						border-radius: 30rpx;
					}
				}
			}
		}

		.menu-box {
			width: 100%;
			box-sizing: border-box;
			padding: 0 50rpx;
			background: #ffffff;
			display: flex;
			justify-content: space-between;
			border-bottom: 1px solid #e6e6e6;
			position: relative;

			.item {
				line-height: 80rpx;
				padding: 0 40rpx;
				position: relative;
				color: #555555;
				font-size: 30rpx;

			}

			.active {
				color: #1783dd;
			}

			.active:after {
				content: '';
				position: absolute;
				width: 60%;
				left: 20%;
				bottom: 4rpx;
				height: 6rpx;
				background: #1783dd;
			}
		}

		.video-main {
			width: 100%;
			height: 400rpx;
			position: relative;

			#myVideo,
			.course-img {
				width: 100%;
				height: 100%;
			}

			.courseTypeLabel {
				width: 100%;
				position: absolute;
				top: 0;
				height: 40rpx;
				line-height: 40rpx;
				font-size: 24rpx;
				text-align: center;
				// background: #0076CA;
				background: rgba(0, 118, 202, 0.5);
				color: #FFFFFF;
			}

			.iconfont {
				display: block;
				z-index: 999;
				width: 70rpx;
				height: 70rpx;
				text-align: center;
				line-height: 70rpx;
				border-radius: 50%;
				background: rgba(0, 0, 0, 0.6);
				color: #fff;
				position: absolute;
				top: 30rpx;
				left: 30rpx;
				font-size: 40rpx;
			}

			.iconshoucang {
				right: 30rpx;
				left: auto;
			}

			.courseType {
				position: absolute;
				padding: 10rpx 16rpx;
				color: #fff;
				font-size: 30rpx;
				background: #1783dd;
				right: 20rpx;
				bottom: 20rpx;
			}

			.isShow {
				color: #1783dd;
			}
		}
	}
</style>
